<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{padding: 0;margin: 0;}
    .dialog{position: fixed;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);-webkit-user-select: none}
    .dialog-header{height: 30px;background-color: bisque}
    .dialog-content{height: 100px;background-color: azure;width: 270px;padding-left: 30px;}
    .dialog-footer{height: 30px;background-color: burlywood}
    .dialog-footer span{float:right;margin-right: 15px;line-height: 30px;background-color: black;color: azure;padding: 0 5px ;cursor: pointer;}
    .dialog .border1{height: 5px;position: absolute;top: 0;background-color: brown;cursor:crosshair}
    .dialog .border2{height: 5px;position: absolute;bottom: 0;;background-color: brown;cursor:crosshair}
    </style>
</head>
<body>
<button id="del">删除弹窗</button>
<button id="add">新增数据</button>
    <!-- <div class="dialog">
        <div class="dialog-header">提示</div>
        <div class="dialog-content">主体内容</div>
        <div class="dialog-footer">
            <span>确定</span>
            <span>取消</span>
        </div>
    </div> -->
</body>
<script>
var dialog={
    init:function(opt){
        this.option={
            width:400,
            height:200,
            tip:"提示",
            content:"测试",
            okbtn:{
                html:"测试确定",
                fn:function(){
                    alert("确定")
                }
            },
            cancelbtn:{
                html:"取消测试",
                fn:function(){
                    alert("666")
                }
            }
        }
        if(!this.box){
            this.create()
        }else{
            this.show()
        }
        
        this.extend(opt)
        this.bindData()
        this.bindEvevt()
    },
    extend:function(opt){
        for(var i in opt){
            this.option[i]=opt[i]
        }
    },
    hide:function(){
        this.box.style.display="none"
    },
    show:function(){
        this.box.style.display="block"
        this.box.style.left="50%"
        this.box.style.top="50%"
        this.box.style.transform="translateX(-50%) translateY(-50%)"
        // left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%)
    },
    bindEvevt:function(){
        var that=this
        this.okbtn.onclick=function(){
            that.option.okbtn.fn()
            that.hide()
        }
        this.cancelbtn.onclick=function(){
            that.option.cancelbtn.fn()
            that.hide()
        }
        //试着加个拖拽效果
        this.box.onmousedown=function(e){
            var evt=window.event||e
            var startx=evt.pageX
            var starty=evt.pageY
            var left=parseInt(getComputedStyle(that.box)["left"])
            var top=parseInt(getComputedStyle(that.box)["top"])
            document.onmousemove=function(e){
                var evt=window.event||e
                var x=evt.pageX-startx
                var y=evt.pageY-starty
                that.box.style.left=left+x+"px"
                that.box.style.top=top+y+"px"
            }
            document.onmouseup=function(){
                document.onmousemove=""
            }
        }
        this.border1.onmousedown=function(e){
            var evt=window.event||e
            evt.stopPropagation();
            var starty=evt.page
            Y
            var boxheight=parseInt(getComputedStyle(that.box)["height"])
            document.onmousemove=function(e){
                var evt=window.event||e
                var y=evt.pageY-starty
                
                // that.box.style.top=
                that.content.style.height=boxheight-2*y+"px"
                if(parseInt(that.content.style.height)>=500){
                    that.content.style.height="500px"
                }
                if(parseInt(that.content.style.height)<=150){
                    that.content.style.height="150px"
                }
                
            }  
            document.onmouseup=function(){
                document.onmousemove=""
            }
        }
        
        this.border2.onmousedown=function(e){
            var evt=window.event||e
            evt.stopPropagation();
            var starty=evt.pageY
            var boxheight=parseInt(getComputedStyle(that.box)["height"])
            document.onmousemove=function(e){
                var evt=window.event||e
                var y=evt.pageY-starty
                
                that.content.style.height=boxheight+2*y+"px"
                if(parseInt(that.content.style.height)>=500){
                    that.content.style.height="500px"
                }
                if(parseInt(that.content.style.height)<=150){
                    that.content.style.height="150px"
                }
                
            }  
            document.onmouseup=function(){
                document.onmousemove=""
            }
        }
        
    },
    
    bindData:function(){
        this.header.innerHTML=this.option.tip
        this.content.innerHTML=this.option.content
        this.okbtn.innerHTML=this.option.okbtn.html
        this.cancelbtn.innerHTML=this.option.cancelbtn.html
        this.header.style.width=this.option.width+"px"
        this.content.style.width=this.option.width-30+"px"
        this.footer.style.width=this.option.width+"px"
        this.content.style.height=this.option.height+"px"
        // this.box.style.left=parseInt(getComputedStyle(this.box)["left"])-this.option.width/2+"px"
        // this.box.style.top=parseInt(getComputedStyle(this.box)["top"])-this.option.height/2+"px"
        //加一个边试试先
        this.border1=document.createElement("div")
        this.border1.className="border1"
        // this.border1.style.height="5px"
        this.border1.style.width=this.option.width+"px"
        // this.border1.style.position="absolute"
        // this.border1.style.top=0
        // this.border1.style.backgroundColor="red"
        this.box.appendChild(this.border1)
        this.border2=document.createElement("div")
        this.border2.className="border2"
        this.border2.style.width=this.option.width+"px"
        this.box.appendChild(this.border2)
    },
    create:function(){
        this.box=document.createElement("div")
      
        this.box.className="dialog"
        document.body.appendChild(this.box)
        this.header=document.createElement("div")
        this.header.className="dialog-header"
        this.header.innerHTML="提示"
        this.box.appendChild(this.header)
        this.content=document.createElement("div")
        this.content.innerHTML="主体内容"
        this.content.className="dialog-content"
        this.box.appendChild(this.content)
        this.footer=document.createElement("div")
        this.footer.className="dialog-footer"
        this.box.appendChild(this.footer)
        this.okbtn=document.createElement("span")
        this.okbtn.innerHTML="ok"
        this.footer.appendChild(this.okbtn)
        this.cancelbtn=document.createElement("span")
        this.cancelbtn.innerHTML="no"
        this.footer.appendChild(this.cancelbtn)
        
    }
}
del.onclick=function(){
    dialog.init({
            width:400,
            height:100,
            tip:"删除删除正式的！",
            content:"试试看！",
            okbtn:{
                html:"确定",
                fn:function(){
                    alert("确定")
                }
            },
            cancelbtn:{
                html:"测试",
                fn:function(){
                    alert("666")
                }
            }
        })
}
add.onclick=function(){
    dialog.init({
            width:300,
            height:200,
            tip:"新增用户！",
            content:`用户<input type="text" id="username"><br>
    密码<input type="text" id="userpwd">`,
            okbtn:{
                html:"确定",
                fn:function(){
                    var usernameInp=document.getElementById("username")
                    alert(usernameInp.value)
                }
            },
            cancelbtn:{
                html:"测试",
                fn:function(){
                    alert("666")
                }
            }
        })
}
</script>
</html>